<template>
	<view>
		<view class="head">
			<text class="">欢迎注册</text>
		</view>
		<view class="item">
			<view class="item_detail">
				<text>账号</text>
				<input type="text" placeholder="请输入账号" v-model="username" maxlength="12" require='require'>
			</view>
			<view class="item_detail">
				<text>密码</text>
				<input type="text" placeholder="请输入密码" v-model="password" maxlength="12" require='require'>
			</view>
			<view class="item_detail">
				<text>昵称</text>
				<input type="text" placeholder="请输入昵称"     v-model="nickname"  maxlength="12" require='require'>
			</view>
			<view class="item_detail">
				<text>手机号</text>
				<input type="text" placeholder="请输入手机号"   v-model="phone" maxlength="11" require='require'>
			</view>
			
		</view>
		<button @click="register" style="background: #4768f3; width: 500rpx; color: white;">注册</button>
	</view>
</template>

<script>
	import urls from '@/common/urls.js'

	export default {
		data() {
			return {
				username: "",
				password: "",
				nickname: "",
				phone: "",


			}
		},
		methods: {
			register() {
				let username = this.username
				let password = this.password
				let nickname = this.nickname
				let phone = this.phone
				if (username && password && nickname && phone) {
					this.$axios.post(urls.graphql, {
							query: `
						query register{
							register(username: "${username}",password: "${password}",nickname: "${nickname}",phone: "${phone}",) {
								msg
								status
							}
							}`
						}, )
						.then(res => {
							// console.log(res)
							if(res.errors){
								uni.showToast({
									title: '用户名已存在',
									icon: 'none'
								})
							}
							else{
								const register = res.data.register;
								if (register.length !== 0) {
									// let {token,nickname,id} = login[0];
									console.log("register ok", register[0]);
									uni.showToast({
										title: '注册完成',
										icon: 'none'
									})
									setTimeout(()=>{
										uni.navigateTo({
											url: './login'
										})
									},1500)
									
								}
							
							}
						})
						.catch(err => {
							console.log("err", err)
							uni.showToast({
								title: '未知错误',
								icon: 'none'
							})
						})
				}
				else {
					uni.showToast({
						title: '请检查是否有未填项',
						icon: 'none'
					})
				
				}
			}

		},
		onShow() {}
	}
</script>

<style lang="scss">
.head{
	font-size: 50rpx;
	margin-left: 20rpx;
	margin-top: 20rpx;
	margin-bottom: 10rpx;
}
.item{
	margin-left: 40rpx;
	font-size: 40rpx;
	.item_detail{
		margin-bottom: 20rpx;
		text{
			color: #333333;
			font-size: 32rpx;
			font-weight: 900;
		}
		input{
			background: #f3f3f3;
			margin-top: 10rpx;
			width: 600rpx;
			height: 70rpx;
			font-size: 32rpx;
			padding-left: 10rpx;
			border-radius: 10rpx;
		}
	}
}
</style>
